<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		        body {
		            font-family: Arial, sans-serif;
		            display: flex;
		            justify-content: center;
		            align-items: center;
		            height: 100vh;
		            margin: 0;
		        }
		        .counter {
		            display: flex;
		            align-items: center;
		            gap: 10px;
		        }
		        .counter button {
		            padding: 10px 20px;
		            font-size: 16px;
		            cursor: pointer;
		        }
		        .counter span            {
		 font-size: 24px;
		            font-weight: bold;
		        }
		    </style>
	</head>
	<body>
		 <div class="counter">
		        <button id="decrementBtn">-</button>
		        <span id="count">0</span>
		        <button id="incrementBtn">+</button>
		    </div>
		
		    <script>
		        // 获取按钮和计数器的DOM元素
		        const decrementBtn = document.getElementById('decrementBtn');
		        const incrementBtn = document.getElementById('incrementBtn');
		        const countDisplay = document.getElementById('count');
		
		        // 初始化计数器
		        let count = 0;
		
		        // 增加计数器的函数
		        function increment() {
		            count++;
		            countDisplay.textContent = count;
		        }
		
		        // 减少计数器的函数
		        function decrement() {
		            count--;
		            countDisplay.textContent = count;
		        }
		
		        // 为按钮添加事件监听器
		        incrementBtn.addEventListener('click', increment);
		        decrementBtn.addEventListener('click', decrement);
		    </script>
	</body>
</html>